import React, { Component } from "react";
import logo from "../images/logo.png";
import axios from "axios";
class RecordWarSituation extends Component {
  state = {situation:[]}
  componentDidMount(){
    axios.get(`/Tgh/data/match_schedule_data`).then(res=>{
      console.log(res.data);
      this.setState({situation:res.data.data});
    })
  }
  render() {
    return (
      <section className="war-situation">
        <div className="top-title">
          <i
            className="fa fa-angle-left back"
            onClick={() => this.props.history.go(-1)}
          />
          战况查看
        </div>
        <div style={{ backgroundImage: `url(${logo})` }} className="logo" />
        {this.renderSituation()}
      </section>
    );
  }
  renderSituation(){
    if(this.state.situation.length!==0){
      return this.state.situation.map((data,key)=>{
        console.log(data,key)
        const { city, club1, club2, date, id, match_name, site, status} = data;
        return(
          <div className="situation-contain" key={id}>
            <div className="s-time">{date}</div>
            <div className="s-detail">
              <div style={{ fontSize: 16 }}>
                <div style={{ color: "rgba(16,16,16,0.57)" }}>{site || "未知赛区"}</div>
                <div>{match_name}</div>
              </div>
              <div className="s-area">{city}</div>
              <div>
                <div>{club1}</div>
                <div>{club2}</div>
              </div>
              <div style={{color:"#E51C23"}}>{statusToName[status] || "未开始"}</div>
            </div>
          </div>
        )
      })
    }
  }
}
const statusToName = {
  "1":"未开始",
  "2":"已开始",
}
export default RecordWarSituation;
